<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" import="java.util.*" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header_h_zi{
            font-size: 13px;
            text-align: center;
            line-height: 30px;
            color: #535353;
        }
        .line{
            height: 12px;
            width: 1px;
            background-image: url("../img_header/line.png");
            float: left;
            position: relative;
            top: 9px;
        }
        #header_h{
            height: 30px;
            width:1600px;
            background-color: #f6f6f6;
        }
        #header_h_left{
            height: 30px;
            width: 200px;
            position: absolute;
            left: 180px;
        }
        #header_h_left_img{
            height: 16px;
            width: 13px;
            position: relative;
            top: 9px;
            background-image: url("../img_header/1.png");
            background-repeat: no-repeat;
            background-position: -94px -40px;
            float: left;
            vertical-align: middle;
        }
        #header_h_left_zi{
            float: left;
            height: 20px;
            width: 80px;
            position: relative;
            left: 2px;
        }
        #header_h_right{
            height: 30px;
            width: 800px;
            float: right;
        }
        #login{
            height: 30px;
            width: 50px;
            float: left;
        }
        #register{
            height: 30px;
            width: 50px;
            float: left;
        }
        #information{
            height: 30px;
            width: 82px;
            float: left;
        }
        #img_information{
            height: 13px;
            width: 16px;
            float: left;
            background-repeat: no-repeat;
            background-image: url("../img_header/import.png");
            position: relative;
            top: 9px;
            left: 18px;
        }
        #information_zi{
            height: 30px;
            width: 65px;
            float: left;
        }
        #myHome{
            height: 30px;
            width: 100px;
            float: left;
        }
        #myHome_zi{
            height: 30px;
            width: 80px;
            float: left;
        }
        #img_myHome{
            height: 8px;
            width: 8px;
            float: left;
            background-repeat: no-repeat;
            background-image: url("../img_header/top_nav_icos.png");
            position: relative;
            top: 10px;
            background-position: -1px ;
        }
        #phone{
            height: 30px;
            width: 120px;
            float: left;
        }
        #img_phone{
            height: 18px;
            width: 13px;
            float: left;
            background-repeat: no-repeat;
            background-image: url("../img_header/tel.png");
            background-position: 0px -190px;
            position: relative;
            top: 7px;
            left: 18px;
        }
        #tel{
            height: 30px;
            width: 200px;
            float: left;
        }
        #img_tel{
            height: 18px;
            width: 13px;
            float: left;
            background-repeat: no-repeat;
            background-image: url("../img_header/top_nav_icos.png");
            background-position: 0px -42px;
            position: relative;
            left: 20px;
            top: 5px;
        }
        #tel_num{
            height: 30px;
            width: 150px;
            float: left;
            font-size: 14px;
            color: #dd0000;
        }
        fieldset {
            width: 500px;
            padding: 20px;
            margin: 30px;
            border: 1px solid #ccc;
        }

        legend{
            font-size: 18px;
            font-weight: bold;
        }

        #addr-show, #addr-show02,#addr-show03{
            width: 200px;
            height: 25px;
            margin-bottom: 10px;
        }

        .btn {
            width: 80px;
            height: 30px;
            border-radius: 4px;
            border: 1px solid #ccc;
            outline: none;
            background-color: #aaa;
            margin: 0 20px;
        }

        .btn:disabled{
            background-color:#ccc;
        }

        #addr-choice{
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            padding: 10px 0;
            margin-bottom: 20px;
        }

        #title-wrap li,#addr-wrap li{
            list-style: none;
            display: inline-block;
            text-align: center;
            cursor: pointer;
        }

        #title-wrap li{
            width:163px;
            height: 45px;
            line-height: 45px;
            margin-bottom: 10px;
        }

        .titleSel{
            border-bottom: 2px solid #23B7E5;
        }

        #addr-wrap li{
            width: 83px;
            height: 30px;
            border-radius: 4px;
            line-height: 30px;
            font-size: 14px;
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        #addr-wrap li:hover{
            background-color: #23B7E5;
        }
        #bottom{
            width: 100%;
            float: left;
            height: 280px;
            text-align: center;
        }

    </style>
    <link rel="stylesheet" href="../css/reset1.css">
    <link rel="stylesheet" href="../css/carts1.css">
</head>
<style>
    * {padding: 0;margin: 0;font-family: "微软雅黑";font-size: 14px;}
    ul,li {list-style: none;}
    a {text-decoration: none;color: black;}
</style>
<body>
<jsp:include page="hd.jsp"></jsp:include>
<script type="text/javascript">
    function changeimgziover1() {
        var homePage=document.getElementById("homePage");
        var img_1=document.getElementById("img_1");
        var zi_1=document.getElementById("zi_1");
        img_1.style.backgroundPosition=("1px 1px")?("1px -22px"):("1px 1px");
        zi_1.style.color="red";
    }
    function changeimgziout1() {
        var homePage=document.getElementById("homePage");
        var img_1=document.getElementById("img_1");
        var zi_1=document.getElementById("zi_1");
        img_1.style.backgroundPosition=("1px -22px")?("1px 1px"):("1px -22px");
        zi_1.style.color="black";
    }
    function changeimgziover2() {
        var jzCenter=document.getElementById("jzCenter");
        var img_2=document.getElementById("img_2");
        var zi_2=document.getElementById("zi_2");
        img_2.style.backgroundPosition=("-24px 0px")?("-24px -23px"):("-24px 0px");
        zi_2.style.color="red";
    }
    function changeimgziout2() {
        var jzCenter=document.getElementById("jzCenter");
        var img_2=document.getElementById("img_2");
        var zi_2=document.getElementById("zi_2");
        img_2.style.backgroundPosition=("-24px -23px")?("-24px 0px"):("-24px -23px");
        zi_2.style.color="black";
    }

    function changeimgziover3() {
        var findDecoration=document.getElementById("findDecoration");
        var img_3=document.getElementById("img_3");
        var zi_3=document.getElementById("zi_3");
        img_3.style.backgroundPosition=("-48px 0px")?("-48px -23px"):("-48px 0px");
        zi_3.style.color="red";
    }
    function changeimgziout3() {
        var findDecoration=document.getElementById("findDecoration");
        var img_3=document.getElementById("img_3");
        var zi_3=document.getElementById("zi_3");
        img_3.style.backgroundPosition=("-48px -23px")?("-48px 0px"):("-48px -23px");
        zi_3.style.color="black";
    }

    function changeimgziover4() {
        var strategy=document.getElementById("strategy");
        var img_4=document.getElementById("img_4");
        var zi_4=document.getElementById("zi_4");
        img_4.style.backgroundPosition=("-73px 0px")?("-73px -23px"):("-73px 0px");
        zi_4.style.color="red";
    }
    function changeimgziout4() {
        var strategy=document.getElementById("strategy");
        var img_4=document.getElementById("img_4");
        var zi_4=document.getElementById("zi_4");
        img_4.style.backgroundPosition=("-73px -23px")?("-73px 0px"):("-73px -23px");
        zi_4.style.color="black";
    }
</script>

<div style="width: 72%;height:120px;margin: 0px auto;margin-top: 30px;">
    <div style="height: 40px;padding-left: 5px;border-left: 1px solid rgba(128,128,128,0.53);float: left;margin:29px 3px;color: grey;line-height: 50px;font-size: 25px">购物车</div>
    <div id="liucheng" style="float: right;margin-top: 18px">
        <div style="height:60px;width: 155px;float: left;">
            <div style="width: 40px;height: 40px;background-color: rgba(255,0,0,0.74);border-radius: 50%;color: white;text-align: center;font-size: 18px;
                line-height: 40px;margin-left: 7px;float: left">1</div>
            <div style="width: 100px;border: 0.5px solid gainsboro;float: left;margin: 20px 0px 0px 5px"></div>
            <p style="clear: left;font-size: 18px;color: grey">购物车</p>
        </div>
        <div style="height:60px;width: 155px;float: left;">
            <div style="width: 40px;height: 40px;border-radius: 50%;border: 1px solid black;text-align: center;font-size: 18px;
                line-height: 40px;margin-left: 7px;float: left">2</div>
            <div style="width: 100px;border: 0.5px solid gainsboro;float: left;margin: 20px 0px 0px 5px"></div>
            <p style="clear: left;font-size: 18px;color: grey">填信息</p>
        </div>
        <div style="height:60px;width: 155px;float: left;">
            <div style="width: 40px;height: 40px;border-radius: 50%;border: 1px solid black;text-align: center;font-size: 18px;
                line-height: 40px;margin-left: 7px;float: left">3</div>
            <div style="width: 100px;border: 0.5px solid gainsboro;float: left;margin: 20px 0px 0px 5px"></div>
            <p style="clear: left;font-size: 18px;color: grey">去支付</p>
        </div>
        <div style="height:60px;width: 55px;float: left;">
            <div style="width: 40px;height: 40px;border-radius: 50%;border: 1px solid black;text-align: center;font-size: 18px;
                line-height: 40px;margin-left: 7px;float: left">4</div>
            <p style="clear: left;font-size: 18px;color: grey">待收货</p>
        </div>
    </div>
</div>

<div style="width: 60%;margin: 0px auto" >
    <fieldset>
        <legend>请正确填写信息</legend>
        <div  for="addr-show02" style="font-size: 15px">
            <table>
                <tr>
                    <td style="text-align: right"><p style="color: red;display: inline-block">*</p>收件人姓名：</td>
                    <td><input type="text" style="width: 150px;height: 25px"></td>
                </tr>
                <tr>
                    <td style="text-align: right"><p style="color: red;display: inline-block;">*</p>收件人手机号：</td>
                    <td><input type="text"  style="width: 150px;height: 25px"></td>
                </tr>
                <tr>
                    <td><p style="color: red;display: inline-block;">*</p>请选择收货地址：</td>
                    <td><input type="text" id="addr-show02" style="width: 400px;margin-bottom: 0px"></td>
                </tr>
                <tr>
                    <td><p style="color: red;display: inline-block;">*</p><p style="display: inline-block;font-size: 15px;">请填写详细地址：</p></td>
                    <td><input type="text"  style="width: 400px;height: 24px"></td>
                </tr>
            </table>
        </div>
        <div id="addr-choice" style="width: 900px;margin-top: 10px" >
            <ul id="title-wrap">
                <li value="0">省份</li>
                <li value="1">城市</li>
                <li value="2">县区</li>
            </ul>
            <div id="show-panel">
                <ul id="addr-wrap">
                </ul>
            </div>
        </div>
        <button type="button" class="btn met2">确定</button>
    </fieldset>
</div>

<section class="cartMain" style="margin-top: 80px">
    <div class="cartMain_hd">
        <ul class="order_lists cartTop">
            <li class="list_chk">
                <!--所有商品全选-->
                <input type="checkbox" id="all" class="whole_check">
                <label for="all"></label>
                全选
            </li>
            <li class="list_con">商品信息</li>
            <li class="list_info">商品参数</li>
            <li class="list_price">单价</li>
            <li class="list_amount">数量</li>
            <li class="list_sum">金额</li>
            <li class="list_op">操作</li>
        </ul>
    </div>

    <div class="cartBox">
        <div class="shop_info">
            <div class="all_check">
                <!--店铺全选-->
                <input type="checkbox" id="shop_a" class="shopChoice">
                <label for="shop_a" class="shop"></label>
            </div>
            <div class="shop_name">
                店铺：<a href="javascript:;">优家私营小店铺</a>
            </div>
        </div>
        <div class="order_content">
            <ul class="order_lists">
                <li class="list_chk">
                    <input type="checkbox" id="checkbox_2" class="son_check">
                    <label for="checkbox_2"></label>
                </li>
                <li class="list_con">
                    <div class="list_img"><a href="javascript:;"><img src="../image/O1CN01ounDqb1SjejD7owHj_!!1966652283.jpg" alt=""></a></div>
                    <div class="list_text"><a href="javascript:;">摘星辰狂拽酷炫吊炸天吊灯</a></div>
                </li>
                <li class="list_info">
                    <p>规格：默认</p>
                </li>
                <li class="list_price">
                    <p class="price">￥980</p>
                </li>
                <li class="list_amount">
                    <div class="amount_box">
                        <a href="javascript:;" class="reduce reSty">-</a>
                        <input type="text" value="1" class="sum">
                        <a href="javascript:;" class="plus">+</a>
                    </div>
                </li>
                <li class="list_sum">
                    <p class="sum_price">￥980</p>
                </li>
                <li class="list_op">
                    <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                </li>
            </ul>
            <ul class="order_lists">
                <li class="list_chk">
                    <input type="checkbox" id="checkbox_3" class="son_check">
                    <label for="checkbox_3"></label>
                </li>
                <li class="list_con">
                    <div class="list_img"><a href="javascript:;"><img src="../image/O1CN01iCsC901SjemBF2Clu_!!0-item_pic.jpg_400x400.jpg" alt=""></a></div>
                    <div class="list_text"><a href="javascript:;">摘星辰狂拽酷炫吊炸天吊灯</a></div>
                </li>
                <li class="list_info">
                    <p>规格：默认</p>
                </li>
                <li class="list_price">
                    <p class="price">￥780</p>
                </li>
                <li class="list_amount">
                    <div class="amount_box">
                        <a href="javascript:;" class="reduce reSty">-</a>
                        <input type="text" value="1" class="sum">
                        <a href="javascript:;" class="plus">+</a>
                    </div>
                </li>
                <li class="list_sum">
                    <p class="sum_price">￥780</p>
                </li>
                <li class="list_op">
                    <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                </li>
            </ul>
            <ul class="order_lists">
                <li class="list_chk">
                    <input type="checkbox" id="checkbox_6" class="son_check">
                    <label for="checkbox_6"></label>
                </li>
                <li class="list_con">
                    <div class="list_img"><a href="javascript:;"><img src="../image/O1CN01Z4zTuT1TzyUMALsVZ_!!717112454.jpg" alt=""></a></div>
                    <div class="list_text"><a href="javascript:;">摘星辰狂拽酷炫吊炸天吊灯</a></div>
                </li>
                <li class="list_info">
                    <p>规格：默认</p>
                </li>
                <li class="list_price">
                    <p class="price">￥180</p>
                </li>
                <li class="list_amount">
                    <div class="amount_box">
                        <a href="javascript:;" class="reduce reSty">-</a>
                        <input type="text" value="1" class="sum">
                        <a href="javascript:;" class="plus">+</a>
                    </div>
                </li>
                <li class="list_sum">
                    <p class="sum_price">￥180</p>
                </li>
                <li class="list_op">
                    <p class="del"><a href="javascript:;" class="delBtn">移除商品</a></p>
                </li>
            </ul>
        </div>
    </div>

    <!--底部-->
    <div class="bar-wrapper">
        <div class="bar-right">
            <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
            <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
            <div class="calBtn"><a href="javascript:;">结算</a></div>
        </div>
    </div>
</section>
<section class="model_bg"></section>
<section class="my_model">
    <p class="title">删除宝贝<span class="closeModel">X</span></p>
    <p>您确认要删除该宝贝吗？</p>
    <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a></div>
</section>

<div id="bottom" style="background-color: #d9d9d9;margin-top: 100px;font-size: 14px;line-height: 25px">
    <div class="jia_foot_info" style="margin-top: 50px">
        <div class="jia_foot_con">
            <p class="jia_foot_link">
                <a href="//www.jia.com/help/0001.html" rel="nofollow" target="_blank">关于我们</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/0029.html" target="_blank" rel="nofollow">联系我们</a><span class="jia_split">|</span>
                <a href="//news.jia.com/" target="_blank" rel="nofollow">媒体报道</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/0032.html" target="_blank" rel="nofollow">法律声明</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/0002.html" target="_blank" rel="nofollow">企业文化</a><span class="jia_split">|</span>
                <a href="http://www.qeeka.com" target="_blank" rel="nofollow">投资者关系</a><span class="jia_split">|</span>
                <a href="//www.jia.com/page/zhaoshang/zhuangxiu.html" target="_blank" rel="nofollow">入驻装修平台</a><span class="jia_split">|</span>
                <a href="//www.jia.com/zhaoshang/" tjjj="sjrz.2" target="_blank" rel="nofollow">零售合作</a><span class="jia_split">|</span>
                <a href="//www.jia.com/page/hhrzs/index.html" tjjj="jmqjds" target="_blank" rel="nofollow">加盟齐家典尚</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/0055.html" target="_blank" rel="nofollow">诚聘英才</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/0033.html" target="_blank">网站地图</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/" tjjj="bottom.link.help">帮助中心</a><span class="jia_split">|</span>
                <a href="//www.jia.com/help/yyzz.html" tjjj="bottom.link.help">营业执照</a><span class="jia_split">|</span>
                <a href="javascript:;" class="jia_foot_open">更多<i></i></a>
            </p>
            <p class="jia_foot_link footnone">
                <a href="//www.jia.com/zx/" target="_blank" tjjj="footer.bottom.1">找装修公司</a><span class="jia_split">|</span>
                <a href="//www.jia.com/wangpu/c/citylist/" target="_blank" tjjj="footer.bottom.2">买建材家居</a><span class="jia_split">|</span>
                <a href="//tg.jia.com/" target="_blank" tjjj="footer.bottom.3">齐家团购</a><span class="jia_split">|</span>
                <a href="//www.jia.com/baike/" target="_blank" tjjj="footer.bottom.4">家居百科</a><span class="jia_split">|</span>
                <a href="//www.jia.com/company/" target="_blank" tjjj="footer.bottom.5">装修公司库</a><span class="jia_split">|</span>
                <a href="//www.jia.com/product/" target="_blank" tjjj="footer.bottom.7">产品信息库</a><span class="jia_split">|</span>
                <a href="//www.jia.com/wenda/" target="_blank" tjjj="footer.bottom.9">装修知识</a><span class="jia_split">|</span>
                <a href="//tuku.jia.com/jiaju/" tjjj="2014.foot.jiajupic">家居效果图</a><span class="jia_split">|</span>
                <a href="http://m.jia.com/" tjjj="2014.foot.wap">齐家手机站</a><span class="jia_split">|</span>
                <a href="//www.jia.com/wangpu/" tjjj="2014.foot.wangpu">店铺大全</a><span class="jia_split">|</span>
                <a href="//www.jia.com/pinpai/" target="_blank" tjjj="footer.bottom.8">品牌库</a><span class="jia_split">|</span>
                <a href="//www.jia.com/zxq/" target="_blank" tjjj="footer.bottom.12">找小区</a><span class="jia_split">|</span>
                <a href="//www.jia.com/jcjm/" target="_blank" tjjj="footer.bottom.10">建材加盟</a><span class="jia_split">|</span>
                <a href="//zixun.jia.com/xgt/" target="_blank" tjjj="footer.bottom.11">装修效果图</a><span class="jia_split">|</span>
                <a href="//www.jia.com/hunqing/" target="_blank" tjjj="footer.bottom.12">婚庆</a>
            </p>
        </div>
        <p>
            优家网 版权所有Copyright  2005-2019 www.jia.com All rights reserved
        </p>
        <p>
            中国互联网协会信用评价中心网信认证 网信编码:1664391091 举报电话：021-69108618
        </p>
        <p>
            <a href="//oneimg1.jia.com/content/public/resource/image/tg_home/yiye.gif">
                <img src="//oneimg1.jia.com/content/public/resource/image/tg_home/gov-inco.jpg" border="0" width="40" height="44">
            </a>
            <a href="//www.jia.com/315/" target="_blank" style="margin-left:15px;">
                <img src="//fastued3.jia.com/image/common/315.gif" border="0">
            </a>
        </p>
    </div>

</div>

<!--<script src="city.js"></script>-->
<script src="../js/city.js"></script>
<script src="../js/method.js"></script>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/carts.js"></script>
</body>
</html>